﻿@{
    ViewData["Title"] = "Home Page";
    List<BookCategory> categories = ViewData["categories"] as List<BookCategory>;
    int categoryId = (int)ViewData["categoryId"];
}
@model List<Book>
<style>
    .flex_content{
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
    }
    .flex_content > div{
        margin: 15px 30px;
        flex-basis: 220px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        text-align: center;
    }
    .empty-state img {
        max-width: 100%;
        height: auto;
    }
</style>
<style>
    .container_flex {
        display: flex;
        justify-content: left;
        width: 100%;
    }

    .fixed-width-box {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
        width: 100%;
    }

    .two-column-box {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
    }

    .column {
        flex-basis: 45%;
        flex-shrink: 0;
        margin: 5px;

        display: flex;
        justify-content: left;
    }

    .column > div:nth-child(1){
        width: 102px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    .column > div:nth-child(2){
        padding-left: 10px;
    }

    .column > div:nth-child(2) h2 a {
        color: #262626;
        outline: none;
        text-decoration: none;
        font: 18px / 24px PingFangSC-Regular, HelveticaNeue-Light, Helvetica Neue Light, Microsoft YaHei, "sans-serif";
    }
    p.author {
        height: 16px;
        margin-bottom: 6px;
        overflow: hidden;
    }
    p.author a {
        color: #a6a6a6;
        float: left;
        line-height: 16px;
    }
    p.author em {
        color: #e6e6e6;
        float: left;
        font-family: Arial;
        margin: 1px 8px 0;
    }
    p.author span {
        color: #a6a6a6;
        float: left;
        line-height: 16px;
    }
    p.intro {
        color: #666;
        font-size: 14px;
        height: 48px;
        line-height: 24px;
        margin-bottom: 8px;
        overflow: hidden;
    }
    .image-container {
        width: 102px;
        height: 136px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ccc;
        overflow: hidden;
    }

    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 让图片填充整个容器并保持比例 */
    }
</style>

<div style="display: flex;">
    <ul class="list-group" style="width: 15vw">
        <li class="list-group-item @(categoryId == 0 ? "list-group-item-warning" : "list-group-item-primary")"><a asp-controller="Book" asp-action="BookCategory" asp-route-categoryId="0">全部</a></li>
        @foreach (var c in categories)
        {
            <li class="list-group-item @(categoryId == c.Id ? "list-group-item-warning" : "list-group-item-primary")"><a asp-controller="Book" asp-action="BookCategory" asp-route-categoryId="@c.Id">@c.Name</a></li>
        }
    </ul>
    
    <div style="display: flex; width: 85vw">
        @if (categories.Count > 0)
        {
            <div class="container_flex">
                <div class="fixed-width-box" style="border: none">
                    <div class="two-column-box">
                        @foreach (var b in Model)
                        {
                            <div class="column">
                                <div class="image-container">
                                    <a asp-controller="Book" asp-action="BookReader" asp-route-bookId="@b.Id" target="_blank"> <img src="/@b.CoverImage" alt=""></a>
                                </div>
                                <div>
                                    <div class="book-mid-info">
                                        <h2>
                                            <a asp-controller="Book" asp-action="BookReader" asp-route-bookId="@b.Id" target="_blank">@b.Title</a>
                                        </h2>
                                        <p class="author">
                                            <a class="name" asp-controller="Book" asp-action="BookSearch" asp-route-keyword="@b.Author" data-eid="qd_B59" target="_blank">@b.Author</a><em>|</em><a asp-controller="Book" asp-action="BookCategory" asp-route-categoryId="@b.CategoryId" target="_blank" data-eid="qd_B60">@b.Category.Name</a><em>|</em>
                                            <span>
                                                @if (b.Status == Book.BookStatus.Completed)
                                                {
                                                    @("完结")
                                                }
                                                else
                                                {
                                                    @("更新")
                                                }
                                            </span>
                                        </p>
                                        <p class="intro"> @b.Description </p>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        }
        else
        {
            <div class="container empty-state">
                <img src="https://via.placeholder.com/150" alt="书籍图标">
                <h1>没有找到书籍</h1>
                <p>很抱歉，我们没有找到您查询的书籍。</p>
            </div>
        }
    </div>
</div>


